import React, { Suspense, lazy } from 'react'
import ReactDOM from 'react-dom'
import { Switch, Route, Redirect } from 'react-router-dom' //三个路由组件
import { Provider } from 'react-redux' //负责把属性中的store传递给子组件
import { store, persistor } from './store' //引入仓库
import { ConfigProvider } from 'antd' //配置
import zh_CN from 'antd/lib/locale-provider/zh_CN' //国际化中文
import './assets/css/common.less' //通用的样式
import Tabs from './components/Tabs' //引入底部的页签导航
import { ConnectedRouter } from 'connected-react-router' //redux绑定路由
import { PersistGate } from 'redux-persist/integration/react'
import history from './store/history'
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ConnectedRouter history={history}>
        <ConfigProvider locale={zh_CN}>
          <main className="main-container">
            <Suspense fallback={null}>
              <Switch>
                <Route
                  path="/"
                  exact
                  component={lazy(() => import('@/routes/Home'))}
                />
                <Route
                  path="/mine"
                  component={lazy(() => import('@/routes/Mine'))}
                />
                <Route
                  path="/profile"
                  component={lazy(() => import('@/routes/Profile'))}
                />
                <Route
                  path="/register"
                  component={lazy(() => import('@/routes/Register'))}
                />
                <Route
                  path="/login"
                  component={lazy(() => import('@/routes/Login'))}
                />
                <Route
                  path="/detail/:id"
                  component={lazy(() => import('@/routes/Detail'))}
                />
                <Route
                  path="/cart"
                  component={lazy(() => import('@/routes/Cart'))}
                />
                <Redirect to="/" />
              </Switch>
            </Suspense>
          </main>
          <Tabs />
        </ConfigProvider>
      </ConnectedRouter>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)
